<template>
  <div class='container'>
    <el-dialog
  :title="name"
  :visible="show"
  width="80%"
  :before-close="handleClose">
    <el-form :model="Form" :rules="rules" :inline="true" ref="Form" style="margin-top:30px">
        <el-form-item :label="name" prop="title" >
        <el-input style="width: 562%" placeholder="请输入文章标签" v-model="Form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容 :" prop="articleBody" >
        <quill-editor style="height:250px" v-model="Form.articleBody"/>
        </el-form-item>
        <el-form-item label="视频地址 :" prop="videoURL" style="margin-top:50px">
        <el-input style="width: 562%" placeholder="请输入视频地址" v-model="Form.videoURL"></el-input>
        </el-form-item>
        </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="changestr">取 消</el-button>
    <el-button type="primary" @click="addChangestr">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { add as addList, detail as detailList, update as updateList } from '@/api/hmmm/articles.js'
export default {
  components: {
    quillEditor
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    noteData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      name: '编辑文章', // 对话框标题
      Form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标签', trigger: 'blur' },
          { pattern: /^[\u0391-\uFFE5A-Za-z]+$/, trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        videoURL: [
          { required: true, message: '请输入视频地址', trigger: 'blur' },
          {
            pattern: /[a-zA-z]+:[^\s]*/,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 关闭对话框
    handleClose () {
      this.$confirm('确认关闭？')
        .then(() => {
          // this.show = false
          this.$emit('update:show', false)
          this.$refs.Form.resetFields()
        })
        .catch(() => {})
    },
    // 父传子修改布尔值，控制对话框
    changestr () {
      // this.show = false
      this.$refs.Form.resetFields()
      this.$emit('update:show', false)
      this.Form = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    addChangestr () {
      // 1.预校验
      this.$refs.Form.validate(async (boo) => {
        if (!boo) return this.$message.error('请正确输入')
        // 2.发送请求
        if (this.Form.id) {
          console.log('编辑成功')
          await updateList(this.Form)
          // 3.关闭对话框 重置表单
          this.changestr()
          // 4.重新渲染
          this.$emit('reload')
        } else {
          console.log('新增成功')
          await addList(this.Form)
          // 3.关闭对话框 重置表单
          this.changestr()
          // 4.重新渲染
          this.$emit('reload')
        }
      })
    },
    // 获取文章简单列表
    async reqSimpleList () {
      console.log(this.noteData)
      const res = await detailList(this.noteData)
      this.Form = res.data
    }
  }
}
</script>

<style scoped lang='less'></style>
